<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>欢迎来到我的HTML实验页面</h1>
    <h2>1. 文本格式化</h2>
    <p>
      这是一个普通的段落（&lt;p&gt;）。HTML允许我们使用标签来<strong>加粗强调</strong>或使用<em>斜体表示轻微强调</em>。
    </p>
    <p>
      我们还可以<mark>高亮标记文本</mark>，插入<sup>上标</sup>和<sub>下标</sub>，或者给文本添加<ins>下划线（插入）</ins>和<del>删除线（删除）</del>。
    </p>
    <p>代码示例: <code>console.log("Hello, World!");</code></p>
    <blockquote>
      这是一个引用块（&lt;blockquote&gt;），常用于引用他人的话或段落。
    </blockquote>
    <pre>
   预格式化文本（&lt;pre&gt;）
   保留空格和
   换行。</pre
    >
    <hr />
    <h2>2. 图片与超链接</h2>
    <p>图片使用 &lt;img&gt; 标签嵌入。它是自闭合标签。</p>
    <img
      src="title.jpg"
      alt="一张描述图片内容的示例图片"
      width="400"
      title="悬停时显示的文本"
    />
    <p>超链接使用 &lt;a&gt; 标签。</p>
    <p>
      访问
      <a href="https://developer.mozilla.org" target="_blank" rel="noopener"
        >MDN Web Docs</a
      >
      学习更多Web技术（target="_blank"会在新标签页打开）。
    </p>
    <p><a href="#top">跳回页面顶部</a>（通过ID锚点）。</p>
  </body>
</html>
